﻿
<script src="~/Scripts/jquery-easyui-extensions/tabs/jeasyui.extensions.tabs.getTabInfo.js"></script>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false,title:'北部'" style="height:100px;border-bottom-width:1px;padding:25px;">
        <a id="btnGetSelectedOption" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取已选标签页的options</a>
        <a id="btnGetSelectedIndex" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取已选标签页的index</a>
        <a id="btnGetSelectedTitle" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取已选标签页的标题</a>
    </div>
    <div data-options="region:'center',border:false,title:'中间'">
        <div id="tabs1" class="easyui-tabs" data-options="fit:true,border:false">
            <div data-options="title:'标签页1',closable:false,iconCls:'icon-add'" style="padding:15px;">
                标签页1
                <br />
                <a id="btnGetTabOption_1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取当前标签页的options</a>
            </div>
            <div data-options="title:'标签页2',closable:true,iconCls:'icon-edit',selected:true" style="padding:15px;">
                标签页2
                <br />
                <a id="btnGetTabOption_2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取当前标签页的options</a>
            </div>
            <div data-options="title:'标签页3',closable:false,iconCls:'icon-remove'" style="padding:15px;">
                标签页3
                <br />
                <a id="btnGetTabOption_3" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取当前标签页的options</a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        $("#btnGetSelectedOption").click(function () {
            var tabs = $("#tabs1");
            var opts = tabs.tabs("getSelectedOption");
            console.log(opts);
            alert("已经获取options，请在浏览器开发者工具（F12）的控制台中查看。");
        });

        $("#btnGetSelectedIndex").click(function () {
            var tabs = $("#tabs1");
            var opts = tabs.tabs("getSelectedIndex");
            alert(opts);
        });

        $("#btnGetSelectedTitle").click(function () {
            var tabs = $("#tabs1");
            var opts = tabs.tabs("getSelectedTitle");
            alert(opts);
        });

        $("a[id^='btnGetTabOption']").click(function () {
            var id = $(this).attr("id"), order = id.split("_")[1];
            var opts = $("#tabs1").tabs("getTabOption", "标签页" + order);
            console.log(opts);
            alert("已经获取options，请在浏览器开发者工具（F12）的控制台中查看。");
        });


    });
</script>

